<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
	<head>
		<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,minimum-scale=1,user-scalable=no"/>
		<meta name="apple-mobile-web-app-capable" content="yes" />
		<title>Progress Indicator</title>
		<link href="../themes/iphone/iphone.css" rel="stylesheet"></link>

		<script type="text/javascript" src="../../../dojo/dojo.js" djConfig="parseOnLoad: true"></script>

		<script language="JavaScript" type="text/javascript">
			//dojo.require("dojo.parser"); // Use the lightweight parser.
			dojo.require("dojo.hash");
			dojo.require("dojox.mobile.parser");
			dojo.require("dojox.mobile");
			dojo.requireIf(!dojo.isWebKit, "dojox.mobile.compat");

			function loadPage(moveTo){
				if(!(moveTo.match(/#(\w+)/))){ return; }
				moveTo.match(/#(\w+)(.*)/);
				var id = RegExp.$1;
				var param = RegExp.$2;
				if(!param){ return; }
				var container = dojo.byId(id);
				container.innerHTML = "";
				var prog = dojox.mobile.ProgressIndicator.getInstance();
				container.appendChild(prog.domNode);
				prog.start();
				/*
				var url = "http://..." + param;
				dojo.xhrGet({
					url: url,
					handleAs: "text",
					load: function(response, ioArgs){
						prog.stop();
						container.innerHTML = response;
						dojox.mobile.parser.parse(container);
					}
				});
				*/
				setTimeout(function(){ // network latency simulation
					prog.stop();
					container.innerHTML = '<h1 dojoType="dojox.mobile.Heading" back="Home" moveTo="#home">'+param+'</h1>\n'+param;
					dojox.mobile.parser.parse(container);
				}, 5000);
			}
			dojo.declare(
				"dojox.mobile.ViewEx",
				dojox.mobile.View,
			{
				onStartView: function(){
					loadPage(location.hash);
				},
				onBeforeTransitionIn: function(moveTo, dir, transition, context, method){
					loadPage("#"+moveTo);
				}
			});
		</script>
	</head>
	<body>
		<div id="home" dojoType="dojox.mobile.View" selected="true">
			<h1 dojoType="dojox.mobile.Heading">Progress Indicator</h1>
			<h2 dojoType="dojox.mobile.RoundRectCategory">External Documents</h2>
			<ul dojoType="dojox.mobile.RoundRectList">
				<li dojoType="dojox.mobile.ListItem" icon="images/i-icon-1.png" moveTo="#bar&myParam=0001">
					Document 0001
				</li>
				<li dojoType="dojox.mobile.ListItem" icon="images/i-icon-2.png" moveTo="#bar&myParam=0002">
					Document 0002
				</li>
				<li dojoType="dojox.mobile.ListItem" icon="images/i-icon-3.png" moveTo="#bar&myParam=0003">
					Document 0003
				</li>
			</ul>
			<div dojoType="dojox.mobile.RoundRect">
				A progress indicator shows up about 5 seconds before a view content is displayed.
				After you moves to other views, you should also be able to navigate through the views with browser's back and forward buttons. Also, views should be bookmarkable. Note that you can pass parameters (e.g. &amp;myParam=001) to a destination view.
			</div>
		</div>

		<div id="bar" dojoType="dojox.mobile.ViewEx"></div>
	</body>
</html>
